
<template>
  <div>
    <div class="container">
      <div class="handle-box" v-if="rbacAuth.getlist">
        <span style="padding: 8px 8px 8px 0">名称：</span>
        <el-input
          v-model.trim="query.keyword"
          placeholder="名称"
          class="handle-input mr10"
          @keydown="initAjaxMethod"
        ></el-input>
        <span style="padding: 8px"></span>
        <el-button
          type="success"
          size="medium"
          icon="el-icon-search"
          @click="handleSearch()"
          >搜索</el-button
        >
        <el-button
          type="warning"
          size="medium"
          icon="el-icon-refresh-left"
          @click="resultClick()"
          >重置</el-button
        >
      </div>
      <div class="handle-box" style="display: flex">
        <el-button
          type="primary"
          icon="el-icon-document-add"
          size="medium"
          @click="createMethod"
          v-if="rbacAuth.add"
          >新增</el-button
        >
        <el-button type="danger" size="medium" icon="el-icon-delete" @click="delAllSelection" v-if="rbacAuth.del">批量删除</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column label="序号" width="55">
          <template slot-scope="scope">{{
            scope.$index + (query.pageIndex - 1) * query.pageSize + 1
          }}</template>
        </el-table-column>
        <el-table-column label="疾病名称" align="center">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column prop="status"
                         align="center"
                         width="200"
                         label="是否开启">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1"
                    type="success">是</el-tag>
            <el-tag v-if="scope.row.status==0"
                    type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" :formatter="this.$DATEFORMAT.formatDate" align="center" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              v-if="rbacAuth.edit"
              type="text"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <span style="padding: 8px"></span>
            <el-popconfirm
              v-if="rbacAuth.del"
              title="确定删除吗？"
              @confirm="handleDelete(scope.row.id, scope.row.title)"
            >
              <el-button
                type="text"
                slot="reference"
                icon="el-icon-delete"
                style="color: #f56c6c"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="sizes,total, prev, pager, next, jumper"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :page-sizes="[10, 20, 50, 100, 150, 200]"
          @size-change="handleSizeChange"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialog" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model.trim="ruleForm.title"
            placeholder="标题名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <el-input
            type="textarea"
            v-model.trim="ruleForm.mark"
            placeholder="详情"
            :rows="5"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="ruleForm.status"
            active-text="禁用"
            inactive-text="启用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model.trim="ruleForm.sort"
            placeholder="排序"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitMethod">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "diseaseDepartment",
  computed: {
    ...mapState({
      rbacAuth:state=>state.app.rcba
    })
  },
  data() {
    return {
      treeData: [],
      dialog: false,
      disabled: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      pageTotal: 0,
      multipleSelection: [],
      ruleForm: {
        title: "",
        mark: "",
        sort: "",
        status: false,
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      dialogTitle: "新增",
      id: null,
    };
  },
  created() {
    this.initAjaxMethod();
  },
  methods: {
    handleSource(data) {
      this.$router.push({
        path: "/resourceEdit",
        query: { id: data.id, type: 2 },
      });
    },
    //重置
    resultClick() {
      this.query = {
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
      };
      this.initAjaxMethod();
    },
    successMethod() {
      this.dialog = false;
      this.$set(this.query, "pageIndex", 1);
      this.initAjaxMethod();
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.initAjaxMethod();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.initAjaxMethod();
    },
    handleSizeChange(e) {
      this.query.pageSize = e;
      this.initAjaxMethod();
    },
    // 删除操作
    handleDelete(id, detail) {
      this.delAjaxMethod(id, detail);
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      if (this.multipleSelection.length <= 0) {
        return this.$message.error("请选择一个目录");
      }
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          let ids=this.multipleSelection.map((item) =>item.id);
          this.delAjaxMethod(ids.join(","));
        })
        .catch(() => {});
    },
    createMethod() {
      this.ruleForm = {
        title: "",
        mark: "",
        sort: "",
        status: false,
      }
      this.dialog = true;
      this.id = null;
      this.dialogTitle = "新增";
      setTimeout(() => {
        this.$refs["ruleForm"].clearValidate();
      }, 200);
    },
    // 编辑操作
    handleEdit(data) {
      this.ruleForm = {
        title: data.title,
        mark: data.mark,
        sort: data.sort,
        status: data.status==1?false:true,
      }
      this.dialog = true;
      this.id = data.id;
      this.dialogTitle = "编辑";
      setTimeout(() => {
        this.$refs["ruleForm"].clearValidate();
      }, 200);
    },
    //列表加载
    initAjaxMethod() {
      this.$http
        .post(this.$API.DISEASE_DEPARTMENT_INDEX, {
          pageIndex: this.query.pageIndex,
          pageSize: this.query.pageSize,
          title: this.query.keyword,
        })
        .then((res) => {
          console.log("媒资列表", res);
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
            this.pageTotal = res.data.total;
          }
        });
    },
    submitMethod() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.ruleForm.status=this.ruleForm.status==false?1:0;
          const loading = this.$loading({ text: "加载中..." });
          const url = this.id
            ? this.$API.DISEASE_DEPARTMENT_EDIT
            : this.$API.DISEASE_DEPARTMENT_ADD;
          if (this.id) this.ruleForm.id = this.id;
          this.$http
            .post(url, this.ruleForm)
            .then((res) => {
              // console.log("公海列表", res);
              if (res.code == 1) {
                this.$message.success("操作成功");
                if (!this.id) this.query.pageIndex = 1;
                this.dialog = false;
                this.initAjaxMethod();
              } else {
                this.$message.error(res.msg);
              }
              loading.close();
            })
            .catch((err) => {
              loading.close();
              this.$message.error(err.msg);
            });
        } else {
          this.$message.error("有必填项目未填写");
        }
      });
    },
    //删除单个
    delAjaxMethod(id) {
      const loading = this.$loading({ text: "加载中..." });
      this.$http
        .post(this.$API.DISEASE_DEPARTMENT_DEL, { ids: id })
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success("删除成功");
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
  },
  components: {
    // watersAdd, exhibitionTmp
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  width: auto;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #f56c6c;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.demo-drawer__content {
  margin: 0 auto;
  width: 80%;
  border: 1px solid #fafafa;
}
.sort-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.sort-group {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.sort-group:hover {
  cursor: pointer;
}
.sort-group:hover span {
  color: #409eff;
}
.sort-group i {
  font-weight: bold;
}
.sort-active {
  color: #409eff;
}
</style>
